<div class="main">
  <div class="wrap" *ngIf="!showCalendar" >
    <p class="title">日期</p>
    <div class="date-btn-wrap seed-flexbox seed-flexbox-content-between seed-flexbox-wrap">
      <div class="each" *ngIf="btnConfig.today" [ngClass]="{active: type == 'today'}" (click)="chooseDate('today')">今日</div>
      <div class="each" *ngIf="btnConfig.lastDay" [ngClass]="{active: type == 'yesterday'}" (click)="chooseDate('yesterday')">昨日</div>
      <div class="each" *ngIf="btnConfig.week" [ngClass]="{active: type == 'week'}" (click)="chooseDate('week')">本周</div>
      <div class="each" *ngIf="btnConfig.lastWeek" [ngClass]="{active: type == 'lastWeek'}" (click)="chooseDate('lastWeek')">上周</div>
      <div class="each" *ngIf="btnConfig.month" [ngClass]="{active: type == 'month'}" (click)="chooseDate('month')">本月</div>
      <div class="each" *ngIf="btnConfig.lastMonth" [ngClass]="{active: type == 'lastMonth'}" (click)="chooseDate('lastMonth')">上月</div>
      <div class="each" *ngIf="btnConfig.year" [ngClass]="{active: type == 'year'}" (click)="chooseDate('year')">今年</div>
      <div class="each" *ngIf="btnConfig.lastYear" [ngClass]="{active: type == 'lastYear'}" (click)="chooseDate('lastYear')">去年</div>
    </div>
    <div class="custom-btn-wrap">
      <div class="custom-btn" [ngClass]="{active: type == 'free'}"  (click)="showCalendar=!showCalendar">自定义时间范围</div>
    </div>
  </div>
  <seed-calendar *ngIf="showCalendar"  (cancel)="cancelFn()" (confirm)="confirmFn($event)"></seed-calendar>
</div>

<div class="bg" (click)="cancelFn()"></div>
